<template>
	<view>
		<view v-if="inPorcessOrderId != null" class="order-process" @click="toOrder">您有进行中的订单,点击查看</view>

		<map id="map" :longitude="from.longitude" :latitude="from.latitude" :style="contentStyle" scale="16"
			:enable-traffic="false" :show-location="true" :enable-poi="true" class="map">
			<cover-image class="location" src="../../static/workbench/location.png"
				@tap="toLocationHandle()"></cover-image>
		</map>
		<view class="panel">
			<view class="from" @tap="chooseLocationHandle('from')">
				<text>{{ from.address }}</text>
			</view>
			<view class="dashed-line"></view>
			<view class="to" @tap="chooseLocationHandle('to')">
				<text>{{ to.address }}</text>
			</view>
			<button class="btn" @tap="toCreateOrderHandle">查看路线</button>
		</view>
	</view>
</template>

<script>
	import GtPush from '../../lib/gtpush-min.js'
	//地图点选插件
	const chooseLocation = requirePlugin('chooseLocation');
	let QQMapWX = require('../../lib/qqmap-wx-jssdk.min.js');
	let qqmapsdk;

	export default {
		data() {
			return {
				//开始位置
				from: {
					address: '输入你的开始位置',
					longitude: 0,
					latitude: 0
				},
				//结束位置
				to: {
					address: '输入你的目的地',
					longitude: 0,
					latitude: 0
				},

				//窗口样式
				contentStyle: '',
				windowHeight: 0,
				//地图对象
				_mapContext: null,
				//标记:开始位置点选或者结束位置点选
				chooseFromOrToflag: null,
				inPorcessOrderId: null,
				chooseType: "",
			};
		},
		methods: {
			// 查看路线
			toCreateOrderHandle(){
				const _this = this;
				// 判断是否输入目的地（因为初始位置是自动设置为当前位置）
				if(_this.to.address != "输入你的目的地"){
					// 将初始位置和目的地位置放入localstorage中，便于跳转页面后获取
					uni.setStorageSync("from",_this.from);
					uni.setStorageSync("to",_this.to);
					// 跳转到创建订单页面
					uni.navigateTo({
						url:"/pages/create_order/create_order"
					})
					
				}else{
					uni.showToast({
						icon:"error",
						title:"请输入位置后再查看路线"
					})
				}
			},
			// 地图选点
			chooseLocationHandle(type) {
				const _this = this;
				_this.chooseType = type; // 设置选点的类型，方面后面进行接收并且赋值
				const key = '555BZ-T5QWJ-VYNFA-DY6G3-6TF67-3OBCD'; //使用在腾讯位置服务申请的key
				const referer = '极速专车'; //调用插件的app的名称
				const category = '生活服务,娱乐休闲';
				wx.navigateTo({
					url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer  + '&category=' + category
				});
			},
			//初始化窗口样式
			initStyle() {
				let _this = this;
				//处理窗口样式
				let windowHeight = uni.getSystemInfoSync().windowHeight;
				_this.windowHeight = windowHeight - 200;
				_this.contentStyle = `height:${_this.windowHeight}px;`;
			},
			// 显示地图的方法
			initMap() {
				const _this = this;
				_this._mapContext = uni.createMapContext("map", this); // 地图初始化
				// 获取经纬度并且赋值
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('workbeanch页面的经度：' + res.longitude);
						console.log('workbeanch页面的纬度：' + res.latitude);
						_this.from.longitude = res.longitude;
						_this.from.latitude = res.latitude
					},

				})

			},
			initQQmapsdk() { // 获取开发密钥
				qqmapsdk = new QQMapWX({
					key: "555BZ-T5QWJ-VYNFA-DY6G3-6TF67-3OBCD" // 就是微信公众平台的应用key
				});
			},
			// 逆地址解析，根据坐标获取所在的城市
			getCityName(location) { // 需要传递一个经纬度
				const _this = this;
				qqmapsdk.reverseGeocoder({ // 执行逆解析方法
					location: location,
					success: function(res) { //成功后的回调
						console.log(res);
						// 状态码，0为正常,
						// 310请求参数信息有误，
						// 311Key格式错误,
						// 306请求有护持信息请检查字符串,
						// 110请求来源未被授权
						if (res.status == 0) { // 如果回调后的状态码为0说明获取地址成功
							_this.from.address = res.result.formatted_addresses.standard_address // 设置获取的城市名称
						} else {
							uni.showToast({ // 如果回调后的状态码不为0说明获取地址失败
								icon: "error",
								title: "地址获取失败，请稍后再试！"
							})
						}
					}
				});
			},
			//  点击光点将地图中心移动到当前定位点
			toLocationHandle() {
				const _this = this;
				_this._mapContext.moveToLocation();
			}
		},
		onShow: function() {
			const _this = this;
			// 显示地图选点的位置
			const location = chooseLocation.getLocation()
			// 判断是否有选点的位置
			if(location){
				// 根据选择的位置类型进行赋值（address是选择的地点的名字，经纬度是必须的）
				if(_this.chooseType == "from") {
					_this.from.address = location.address;
					_this.from.latitude = location.latitude;
					_this.from.longitude = location.longitude;
				}else if(_this.chooseType == "to"){
					_this.to.address = location.address;
					_this.to.latitude = location.latitude;
					_this.to.longitude = location.longitude;
				}
			}
		
		},
		onHide: function() {},
		onLoad: function() {
			//加载进行中的订单
			const _this = this;
			_this.initStyle();
			_this.initQQmapsdk();
			_this.getCityName();
			//初始化地图
			_this.initMap();

		},
		onUnload: function() {
			// 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
			chooseLocation.setLocation(null);
		}
	};
</script>

<style lang="less">
	@import url('workbench.less');
</style>